<template>
	<view class="con">
		<navbar :isback="false" title="驼乡生活信息超市"></navbar>
		<u-loading-page icon-size="100rpx" :loading="loading" loading-text="驼乡生活信息超市"></u-loading-page>
		<view class="" v-if='!loading'>
			<view class="" v-if="istj">
				<image src="/static/msg/jiantou.png" class="jiantou"
					:style="{top:'calc('+top+'px + 4rpx)',left:'calc('+left+'px + 10rpx)'}" mode=""></image>
				<view class="tjtk" :style="{top:'calc('+$u.sys().statusBarHeight+'px + 30rpx + 44px)'}">
					<view class="u-flex u-flex-y-center">
						<!-- 点击…收藏，下次就可以在微信“我”的“收藏”找到本平台。 -->
						点击...收藏，下次就可以在微信“我”的“收藏”找到本平台。
					</view>
					<view class="u-flex u-flex-y-center u-flex-between">

						<view class="" style="width: 20rpx;">

						</view>
						<u-icon @click="istj=false" name="/static/msg/cha.png" size="20rpx"></u-icon>
					</view>

				</view>
			</view>
			<view class="content">
				<!-- 视频框 -->
				<!-- <video id="video" :src="URL(configName.indexBanner)" controls autoplay></video> -->
				<!-- <u-swiper :list="list3" height="484rpx" radius='25rpx' circular autoplay interval='2000'></u-swiper> -->
				<swiper :indicator-dots="false" class="video" circular interval='2000' :current="curr" @change="change">
					<swiper-item v-for="(item,index) in list3" :key="index">
						<image class="video" v-if="getItemType(item) === 'image'" :src="getSource(item)"
							mode="aspectFill" @tap="clickHandler(getItemType(item),index)"></image>
						<video @ended='ended(index)' class="video" v-if="getItemType(item) === 'video'"
							:id="`video-${index}`" :enable-progress-gesture="false" :src="getSource(item)" controls
							@tap="clickHandler(getItemType(item),index)" @fullscreenchange='fullscreenchange'></video>
					</swiper-item>
				</swiper>
				<!-- 链接 -->
				<view class="u-flex u-flex-y-center u-flex-between">
					<view class="u-flex u-flex-column u-flex-items-center" style="width: 48%;">
						<view class="title">
							有喜事·盼好事·避坏事
						</view>
						<view class="linkbox" @click="to('/pages/xishi/home')">
							<u-notice-bar icon=' ' fontSize='24rpx' bgColor='#F7F7F9' color="#1E1E1E" :text="text1"
								direction='column'></u-notice-bar>
						</view>
					</view>
					<view class="u-flex u-flex-column u-flex-items-center" style="width: 48%;" v-if="isDisplay!=0">
						<view class="title">
							单 身
						</view>
						<view class="linkbox" @click="clickshow('潮玩吧将于近期上线，敬请期待！')">
							潮玩吧
						</view>
					</view>
				</view>
			</view>
			<!-- 宫格 -->
			<swiper :indicator-dots="false" class="swiper" circular autoplay interval='2000'
				v-if="list.length>0&&!isqb">
				<swiper-item v-for="(i,t) in Math.ceil(list.length/15)" :key="t">
					<view class="list">
						<view class="list__item" v-for="(item, index) in list" :index="index" :key="index"
							v-if="(index+1)/15<=(t+1)&&(index+1)/15>t" @click="clickto(item)"
							:class='item.name.length>11?"u-grid-item1":""'>
							<!-- <u-icon :customStyle="{paddingTop:42+'rpx'}" :name="URL(item.image)" size="58rpx" imgMode='heightFix'></u-icon> -->
							<image :src="URL(item.image)" style="height: 58rpx;margin-top: 36rpx;width: 58rpx;"
								:style='{width:item.name.length>11?"240rpx":"58rpx"}'>
							</image>
							<text class="grid-text" style="text-align: center;width: 70%;line-height: 36rpx;"
								:style="{width:item.name.length>11?'80%':'70%'}">{{item.name}}</text>
						</view>
					</view>
				</swiper-item>
			</swiper>
			<!-- 展开全部 -->
			<view class="list" v-if="list.length>0&&isqb">
				<view class="list__item" v-for="(item, index) in list" :class='item.name.length>11?"u-grid-item1":""'
					:index="index" :key="index" @click="clickto(item)">
					<image :src="URL(item.image)" mode="" style="height: 58rpx;margin-top: 36rpx;"
						:style='{width:item.name.length>11?"240rpx":"58rpx"}'></image>
					<text class="grid-text" style="text-align: center;width: 70%;line-height: 36rpx;"
						:style="{width:item.name.length>11?'80%':'70%'}">{{item.name}}</text>
				</view>
			</view>
			<view class="chak" @click="isqb=!isqb">
				点击查看全部广告
			</view>
			<!-- tabs -->
			<view class="tab" v-if='qtlist.length>0'>
				<u-tabs :list="list4" lineWidth="118rpx" lineHeight='10rpx' lineColor="#0381FC" :activeStyle="{
				            color: '#1E1E1E',
				            fontWeight: 'bold',
				            transform: 'scale(1.15)'
				        }" :inactiveStyle="{
				            color: '#1E1E1E',
				            transform: 'scale(1)'
				        }" itemStyle="padding-left: 20rpx; padding-right: 20rpx; height: 50rpx;font-size:26rpx;">
				</u-tabs>
			</view>
			<!-- <view class="qita" v-if='qtlist.length>0'>
				<view class="qita__item" v-for="(item,index) in qtlist" :key="index"
					@click="to('/pages/msg/detail?id='+item.id)">
					<u-avatar :src="URL(item.avatar)" shape="circle" size="37rpx" mode="aspectFill"></u-avatar>
					<text style="margin-left: 12rpx;">{{item.username}}</text>
					<text class="qita__item__text">{{item.text}}</text>
					<u-icon name="/static/msg/more.png" size="14rpx" imgMode='widthFix'></u-icon>
				</view>
			</view> -->
			<swiper :indicator-dots="false" class="qita" :autoplay='true' interval='2000' circular vertical
				v-if="qtlist.length>0">
				<swiper-item v-for="(item,t) in qtlist" :key="t">
					<view class="qita__item" @click="to('/pages/msg/list?title=其他信息&is_other=2')">
						<view class="u-flex u-flex-y-center">
							<u-avatar :src="URL(item.avatar)" shape="circle" size="37rpx" mode="aspectFill"></u-avatar>
							<text style="margin-left: 12rpx;">{{item.contract}}</text>
							<text class="qita__item__text">{{item.text}}</text>
						</view>
						<u-icon name="/static/msg/more.png" size="14rpx" imgMode='widthFix'></u-icon>
					</view>
				</swiper-item>
			</swiper>
			<view class="msglist">
				<!-- <msgitem v-for="(item,index) in msglist" :key="index" :item="item"></msgitem> -->
				<view class="msgitem" @click="to('/pages/msg/detail?id='+item.id)" v-for="(item,index) in msglist"
					:key="index">
					<view class="msgitem__top">
						<view class="u-flex u-flex-y-center">
							<u-avatar :src="URL(item.avatar)" shape="circle" size="57rpx" mode="aspectFill"></u-avatar>
							<view class="msgitem__nickname">
								{{item.contract}}
							</view>
							<view class="msgitem__zd" v-if="item.type==2">
								置顶
							</view>
						</view>
						<view class="u-flex u-flex-y-center">
							<view class="msgitem__tag" v-if="item.category_name">
								{{item.category_name}}
							</view>
							<view class="msgitem__tag" v-if="item.is_other==2">
								其他信息
							</view>
							<view @click.stop="callphone(item.phone)">
								<u-icon name="/static/msg/mobile.png" size="62rpx"></u-icon>
							</view>
						</view>
					</view>
					<view class="msgitem__content">
						{{item.text}}
					</view>
					<view class="msgitem__piclist" v-if="item.imags.length>0">
						<u-album :urls="item.imags" multipleSize='222rpx' singleSize='222rpx'
							singleMode='aspectFill'></u-album>
					</view>
					<view class="u-flex u-flex-y-center u-flex-between">
						<view class="msgitem__time">
							{{$u.timeFormat(item.createtime, 'yyyy-mm-dd hh:MM')}}
						</view>
						<view class="u-flex u-flex-y-center">
							<view class="u-flex u-flex-y-center">
								<u-icon name="/static/msg/ll.png" color="#1A1A1A" size="40rpx"
									imgMode='widthFix'></u-icon>
								<view class="msgitem__num">
									{{item.view}}
								</view>
							</view>
							<view class="u-flex u-flex-y-center">

								<button open-type="share" @click.stop.prevent="prevent(item)"
									style="width: 33rpx;height: 33rpx;background-color: transparent;padding: 0;border: 0;">
									<u-icon name="/static/msg/fx.png" color="#1A1A1A" size="33rpx"></u-icon>
								</button>
								<view class="msgitem__num">
									{{item.share}}
								</view>
							</view>
							<view class="u-flex u-flex-y-center" @click.stop="dianz(item,index)">

								<view class="">
									<u-icon name="/static/msg/sc.png" v-if="!item.isCollect" color="#1A1A1A"
										size="34rpx" imgMode='widthFix'></u-icon>
									<u-icon name="/static/msg/ysc.png" v-else color="#E8BF05" size="34rpx"
										imgMode='widthFix'></u-icon>
								</view>
								<view class="msgitem__num">
									{{item.collect}}
								</view>
							</view>
						</view>
					</view>

				</view>
			</view>
		</view>
		<view style="height: 50rpx;"></view>
		<view class="kf">
			<button class="u-reset-button" open-type="contact">
				<image src="/static/xishi/kf.png" class="kficon" mode=""></image>
			</button>
		</view>
		<u-popup mode="center" round="30rpx" :show="isyhtk" bgColor='transparent' zIndex="996" @close="closeyhtk">
			<view class="popbox">
				<view class="popbox__title">
					点击 <text style="color: #0199FE;">“右上角三个点”</text> 按键，分享本平台到微信朋友圈，才能享受优惠发布
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	
	import home from '@/api/_home.js'
	import {
		BASE_URL
	} from '@/api/config';
	export default {
		
		data() {
			return {
				swipercur: 0,
				loading: true,
				list: [],
				list3: [],
				isDisplay: 0,
				list4: [{
						name: '其他信息'
					},
					{
						name: '我有活动'
					},
					{
						name: '我有需求'
					},
					{
						name: '我有服务'
					},
				],
				item: {},
				qtlist: [],
				msglist: [],
				configName: {
					"indexHref": "",
					"indexBanner": ''
				},
				isqb: false,
				left: 0,
				top: 0,
				istj: true,
				curr: 0,
				timmer: null,
				isqp: false,
				text1: ['种棵树', '弄首歌', '集百福', '散百财', '定摆件', '制像章'],
				isyhtk: false
			};
		},


		methods: {
			clickshow(text) {
				uni.$u.toast(text)
			},
			fullscreenchange(e) {
				this.isqp = e.detail.fullScreen
				// console.log(e.detail.fullScreen)
			},
			dianz(item, index) {
				item.isCollect = !item.isCollect
				home.infoCollect({
					id: item.id
				}).then(res => {
					uni.$u.toast('操作成功')
				})
				if (item.isCollect) {
					item.collect++
				}
				if (!item.isCollect) {
					item.collect--
				}
				// this.$emit('dianz', this.isCollect)
				this.$forceUpdate()
			},
			change(e) {
				// 当前的激活索引
				// console.log(e)
				clearTimeout(this.timmer)
				let _this = this
				const {
					current
				} = e.detail
				if (this.getItemType(this.list3[current]) == 'image') {
					this.timmer = setTimeout(() => {
						_this.curr++
						if (_this.curr >= _this.list3.length) {
							_this.curr = 0
						}
					}, 2000)
				}
				this.pauseVideo(this.swipercur)
				this.swipercur = current
				this.curr = current
				this.playVideo(this.swipercur)
			},
			pauseVideo(index) {
				const lastItem = this.getSource(this.list3[index])
				if (uni.$u.test.video(lastItem)) {
					// 当视频隐藏时，暂停播放
					const video = uni.createVideoContext(`video-${index}`, this)
					video.pause()
				}
			},
			playVideo(index) {
				// console.log(this.list3[0])
				const lastItem = this.getSource(this.list3[index])
				if (uni.$u.test.video(lastItem)) {
					const video = uni.createVideoContext(`video-${index}`, this)
					video.play()
				}
			},
			clickto(item) {
				this.$store.commit('setpoplist', item.poplist)
				this.to('/pages/msg/list?title=' + item.name + '&id=' + item.id)
			},
			getindex() {
				this.list3 = []
				for (let key in this.configName) {
					home.readConfig({
						configName: key
					}).then(res => {
						this.configName[key] = res.data.data[key]
						if (key == 'indexBanner') {
							res.data.data[key].map(t => {
								this.list3.push(BASE_URL + t)
							})
							let _this = this
							if (this.list3.length > 1) {
								if (this.getItemType(this.list3[0]) == 'image') {
									this.timmer = setTimeout(() => {
										_this.curr++
									}, 2000)
								} else {
									this.playVideo(0)
								}
							} else {
								this.playVideo(0)
							}

						}
					})

				}
				home.readConfig({
					configName: 'isDisplay'
				}).then(res => {
					if (res.data.code == 1) {
						this.isDisplay = res.data.data.isDisplay
						this.$forceUpdate()
					}
				})
				home.category().then(res => {
					if (res.data.code == 1) {
						this.$store.commit('getcategorylist', res.data.data)
						this.list = this.$store.state.categorylist
						this.loading = false
					}
				})
			},
			ended(index) {
				console.log(this.isqp)
				if (this.isqp) {
					return
				}
				index++
				this.curr = index
				if (this.curr >= this.list3.length) {
					this.curr = 0
				}
				// console.log(this.curr)
				this.playVideo(this.curr)
			},
			prevent(item) {
				// console.log(item)
				this.item = item
			},
			clickHandler(type, index) {
				// this.$emit('click', index)
				// console.log(type,index)
				if (type == 'image') {
					this.preview([this.list3[index]], 0)
				}
				// if(type=='image')
			},
			closeyhtk() {
				this.isyhtk = false
				this.$store.commit('setyhtk', false)
			},
			getlist() {
				// uni.startPullDownRefresh()
				home.infoList({
					topSort: 1,
					status: 2,
					is_other: 1,
				}).then(res => {
					if (res.data.code == 1) {
						this.msglist = res.data.data
						this.msglist.map(t => {
							t.imags = []
							t.imag = t.ad_images.split(',').filter(Boolean)
							t.imag.map(t1 => {
								t.imags.push(BASE_URL + t1)
							})
						})
						this.$forceUpdate()
					}
				})
				home.infoList({
					is_other: 2,
					status: 2
				}).then(res => {
					if (res.data.code == 1) {
						this.qtlist = res.data.data
						this.qtlist.map(t => {
							t.imags = []
							t.imag = t.ad_images.split(',').filter(Boolean)
							t.imag.map(t1 => {
								t.imags.push(BASE_URL + t1)
							})
						})
						uni.stopPullDownRefresh()
						this.$forceUpdate()
					}
				})
			},
			getItemType(item) {
				if (typeof item === 'string') return uni.$u.test.video(this.getSource(item)) ? 'video' : 'image'
				if (typeof item === 'object' && this.keyName) {
					if (!item.type) return uni.$u.test.video(this.getSource(item)) ? 'video' : 'image'
					if (item.type === 'image') return 'image'
					if (item.type === 'video') return 'video'
					return 'image'
				}
			},
			// 获取目标路径，可能数组中为字符串，对象的形式，额外可指定对象的目标属性名keyName
			getSource(item) {
				// console.log(item)
				if (typeof item === 'string') return item
				if (typeof item === 'object' && this.keyName) return item[this.keyName]
				else uni.$u.error('请按格式传递列表参数')
				return ''
			},
		},

		onLoad() {
			this.getindex()
			this.getlist()
			let _this = this
			setTimeout(() => {
				_this.istj = false
			}, 10000)
		},
		onPullDownRefresh() {
			// this.getindex()
			this.getlist()
		},
		onShow() {
			// 获取优惠弹框状态
			this.isyhtk = this.$store.state.isyhtk
			this.getlist()
		},
		mounted() {
			// #ifdef MP
			let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			// console.log(menuButtonInfo)
			this.left = menuButtonInfo.left
			this.top = menuButtonInfo.bottom
			// #endif

			// console.log(video)
		},
		onShareTimeline(res) {
			return {
				title: '驼乡生活信息超市-房屋租售、招聘求职、餐饮美食…潮玩吧、有喜事•种棵树', // 默认为小程序名称
				path: '/pages/tabbar/home', // 默认为当前页面路径
				imageUrl: '/static/logo.png', // 默认为当前页面的截图
				desc: '驼乡生活信息超市-房屋租售、招聘求职、餐饮美食…潮玩吧、有喜事•种棵树'
			}
		}
	}
</script>

<style lang="scss">
	.content {
		padding: 30rpx;
		padding-bottom: 0;

		.linkbox {
			width: 290rpx;
			margin-top: 28rpx;
			height: 96rpx;
			background: #F7F7F9;
			border-radius: 15rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 34rpx 20rpx;
			// width: 274rpx;
			height: 20rpx;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 22rpx;
			color: #1E1E1E;
			line-height: 22rpx;

			&__icon {
				width: 31rpx;
				height: 31rpx;
				margin-right: 14rpx;
			}

			/deep/.u-notice__swiper__item {
				justify-content: center;
			}
		}
	}

	.video {
		width: 690rpx;
		height: 484rpx;
		background: #1B64F9;
		border-radius: 25rpx;
	}

	.grid-text {
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 24rpx;
		color: #0F0D0E;
		line-height: 24rpx;
		margin-top: 10rpx;
	}

	.swiper {
		height: 450rpx;
	}

	.con {
		padding-bottom: 120rpx;
		/* #ifdef MP */
		padding-bottom: 0;
		/* #endif */

	}

	.tab {
		padding: 0 10rpx;
	}

	/deep/.u-tabs__wrapper__nav__line {
		z-index: -1;
	}

	.qita {
		margin: 30rpx;
		margin-bottom: 0;
		background: #F7F7F9;
		border-radius: 10rpx;
		// padding: 3rpx 0;
		padding-left: 22rpx;
		height: 103rpx;

		&__item {
			padding: 34rpx 24rpx 32rpx 0;
			display: flex;
			align-items: center;
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 26rpx;
			color: #1E1E1E;
			line-height: 26rpx;
			// border-bottom: 1rpx solid rgba(154, 154, 154, .18);
			justify-content: space-between;

			&__text {
				width: 400rpx;
				margin-left: 12rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			&:last-child {
				border-bottom: 0;
			}
		}
	}

	.msgitem {
		padding: 38rpx 20rpx 30rpx 30rpx;
		border-bottom: 2rpx solid #F4F6F8;
		background-color: #fff;

		&__top {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-right: 10rpx;
		}

		&__nickname {
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 26rpx;
			color: #5A5A5A;
			line-height: 26rpx;
			margin: 0 8rpx;
		}

		&__zd {
			padding: 0 9rpx;
			height: 36rpx;
			background: #E1BC13;
			border-radius: 18rpx 18rpx 18rpx 0rpx;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 22rpx;
			color: #7A3807;
			line-height: 36rpx;
		}

		&__tag {
			padding: 0 10rpx;
			height: 47rpx;
			background: #F7F7F9;
			border-radius: 8rpx;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 25rpx;
			color: #4E4D52;
			line-height: 47rpx;
			margin-right: 15rpx;
		}

		&__content {
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 30rpx;
			color: #2C2A2A;
			line-height: 40rpx;
			padding: 14rpx 0 20rpx;
		}

		&__piclist {
			margin-bottom: 40rpx;
		}

		&__time {
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 24rpx;
			color: #5A5A5A;
			line-height: 24rpx;
		}

		&__num {
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 24rpx;
			color: #3C3C3C;
			line-height: 24rpx;
			margin: 0 50rpx 0 12rpx;
		}
	}

	uni-button:after {
		border: 0;
	}

	button::after {
		border: 0;
	}

	.list {
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;

		&__item {
			display: flex;
			align-items: center;
			flex-direction: column;
			width: 20%;
		}
	}

	.u-grid-item1 {
		width: 43% !important;
	}

	.chak {
		width: 250rpx;
		height: 50rpx;
		background: linear-gradient(91deg, #0383FC, #533FEB);
		border-radius: 40rpx;
		text-align: center;
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #FFFFFF;
		line-height: 50rpx;
		margin: 10rpx auto 20rpx;
	}

	.tjtk {
		width: 310rpx;
		background: #333333;
		border-radius: 10rpx;
		position: fixed;
		top: 0;
		right: 20rpx;
		z-index: 99999999;
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #EEECEF;
		line-height: 36rpx;
		padding: 8rpx 17rpx 8rpx 20rpx;
	}

	.jiantou {
		width: 26rpx;
		height: 35rpx;
		position: fixed;
		z-index: 99999999;
	}

	.title {
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #1E1E1E;
		padding: 30rpx 0 0;
	}

	.popbox {
		width: 500rpx;
		background: #FFFFFF;
		border-radius: 30rpx;
		padding: 63rpx 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

		&__title {
			// padding: 0 40rpx;
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 30rpx;
			color: #000000;
			line-height: 36rpx;
			text-align: center;
			// margin-bottom: 30rpx;
		}

		&__title1 {
			// padding: 0 40rpx;
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 28rpx;
			color: #000000;
			line-height: 36rpx;
			text-align: center;
			margin-top: 14rpx;
		}

		&__box {
			border-radius: 20rpx;
			border: 2rpx solid rgba(159, 160, 161, .1);
			padding: 20rpx 30rpx;
			margin-bottom: 40rpx;

			&__title {
				font-size: 30rpx;
				font-weight: bold;
				font-family: PingFang SC;
				margin-bottom: 10rpx;
				width: 490rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			&__content {
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 26rpx;
				color: #9FA0A1;
				line-height: 36rpx;
				width: 350rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 3;
				/*省略几行写几*/
				-webkit-box-orient: vertical;
			}

			&__logo {
				width: 110rpx;
				height: 110rpx;
				flex-shrink: 0;
			}
		}
	}
</style>